<template>
  <div class="login" @keyup.enter="submit">
    <div class="center">
      <div
        :class="input.name"
        v-for="(input, index) in inputList"
        :key="index"
        style="position: relative"
      >
        <label :for="input.name" class="text">{{ input.info }}</label>
        <input
          :ref="input.name"
          :type="index === 1 ? 'password' : 'text'"
          :id="input.name"
          class="input"
          :autofocus="index === 0"
          :maxlength="input.maxlength"
          autocomplete="off"
          @input="check(index, $event.currentTarget)"
          :pattern="input.pattern"
          :data-msg="input.msg"
        />
        <i class="el-icon-close clear" v-if="index === 0" @click="clear"></i>
        <div class="warning">
          <p class="tips" style="display: none"></p>
        </div>
      </div>
      <div class="button-area">
        <div class="button" id="submit" @click="submit">登录</div>
        <router-link to="/register" class="button" tag="div">注册</router-link>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import animateCSS from '../../utils/animateCSS';
@Component
export default class Login extends Vue {
  nullMsg = '输入为空！！！';
  inputList = [
    {
      info: "用户名",
      name: "username",
      maxlength: 16,
      pattern: "^[\\w_-]{4,16}$",
      msg: "4到16位（字母，数字，下划线，减号）"
    },
    {
      info: "密码",
      name: "password",
      maxlength: "20",
      pattern: "^[\\w]{6,20}$",
      msg: "6到20位（字母，数字）"
    }
  ];
  check(index: number, input: HTMLInputElement) {
      let pattern = RegExp(input.pattern);
      // HTMLDivElement 需要在querySelector方法前面加个类型断言。
      let msgNode = <HTMLDivElement>document.querySelector('.tips');
      if (!input.value) {
          msgNode.style.display = 'block'
          msgNode.innerText = this.nullMsg;
          return;
      }
      if (pattern.test(input.value)) {
          msgNode.style.display = 'none'
      } else {
          msgNode.style.display = 'block'
          msgNode.innerText = <string>input.getAttribute('data-msg');
      }
    }
  // 删除缓存
  clear() {}
  // 提交
  submit () {
    let username = <HTMLInputElement>document.getElementById('username');
    let password = <HTMLInputElement>document.getElementById('password');
    let arr = [username, password];
    let judge = arr.every((input: HTMLInputElement): boolean => {
      if (!input.value) {
          this.sendTipsMsg();
          return false;
      }
      let msgNode = <HTMLParagraphElement>(<HTMLElement>input.parentNode).getElementsByClassName('tips')[0];
      return msgNode.style.display === 'none';
    })
    if (judge) {
      this.$axios.post(this.$api.LOGIN, {
        username: username.value,
        password: password.value,
      })
      .then((res) => {
        if (!res.data.success) {
          animateCSS('#submit', 'swing');
          this.sendErrorMsg();
        } else {
          this.$message.success('登录成功')
        }
      })
    }
  }
  //发送错误提示
  sendErrorMsg() {
    this.$notify.error({
      title: '错误',
      message: '用户名或密码错误！！！',
      duration: 2000
    });
  }
  //发送提示
  sendTipsMsg() {
    this.$notify.error({
      title: '错误',
      message: '请输入完整信息！！！',
      duration: 2000
    });
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/variable.scss";
.login {
  width: 100%;
  height: 100%;
  background: url("../../assets/img/login.jpg") no-repeat fixed;
  background-size: cover;
  .center {
    width: 300px;
    height: 400px;
    margin-left: auto;
    margin-right: 90px;
    padding: 5%;
    font-size: 25px;
    background: inherit;
    position: relative;
    top: 10%;
    z-index: 10;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset,
      0 0.5em 1em rgba(0, 0, 0, 0.6);
    border-radius: 10%;
    .text{
      display: block;
      padding-bottom: 20px;
    }
    .input {
      border-radius: 5px;
      width: calc(100% - 20px);
      font-size: 20px;
      height: 30px;
      padding: 10px;
      background-color: rgba(0, 0, 0, 0.12);
    }
    .input:focus {
      border-color: #2188ff;
      box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(25, 108, 202, 0.58);
    }
    .clear {
      position: absolute;
      top: 55px;
      right: 10px;
      font-size: 30px;
      cursor: pointer;
      color: #eb7070;
    }
    .warning {
      height: 20px;
      padding: 10px 0;
      .tips {
        color: $warning-font-color;
        font-size: 20px;
        line-height: 20px;
        white-space: nowrap;
      }
    }
  }
  .button-area {
    padding: 60px 10px;
    display: flex;
    justify-content: space-around;
    .button {
      padding: 10px 20px;
      cursor: pointer;
      border-radius: 10px;
      background: rgba(203, 235, 244, 0.32);
    }
  }
  .content::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    filter: blur(5px);
    left: 0;
    top: 0;
    background: inherit;
    z-index: -1;
  }
}
</style>
